<template>
  <div class="product-detail" v-if="product">
    <div class="product-container">
      <div class="product-image">
        <img :src="product.image" :alt="product.name">
      </div>
      <div class="product-info">
        <h2>{{ product.name }}</h2>
        <p class="price">¥{{ product.price }}</p>
        <p class="stock">库存: {{ product.stock }}件</p>
        <p class="description">{{ product.description }}</p>
        <div class="quantity-selector">
          <button @click="decreaseQuantity">-</button>
          <span>{{ quantity }}</span>
          <button @click="increaseQuantity">+</button>
        </div>
        <button class="add-to-cart" @click="addToCart">
          加入购物车
        </button>
      </div>
    </div>
  </div>
  <div v-else class="loading">
    加载中...
  </div>
</template>

<script>
import {ref, onMounted, watch} from 'vue'
import {useRoute} from 'vue-router'
import {useCartStore} from '../../store'
import {fetchProductById} from '../../api/mockData'

export default {
  setup() {
    const product = ref(null)
    const route = useRoute()
    const cartStore = useCartStore()
    const quantity = ref(1)

    const loadProduct = async (id) => {
      product.value = await fetchProductById(id)
      quantity.value = 1
    }

    onMounted(() => {
      loadProduct(route.params.id)
    })

    watch(() => route.params.id, (newId) => {
      loadProduct(newId)
    })

    const increaseQuantity = () => {
      quantity.value += 1
    }

    const decreaseQuantity = () => {
      if (quantity.value > 1) {
        quantity.value -= 1
      }
    }

    const addToCart = () => {
      try {
        cartStore.addToCart(product.value, quantity.value)
        quantity.value = 1
        alert('商品已成功加入购物车')
      } catch (error) {
        alert(error.message)
        // 可以在这里添加重定向到登录页的逻辑
        // router.push('/login')
      }
    }

    return {product, quantity, increaseQuantity, decreaseQuantity, addToCart}
  }
}
</script>

<style scoped>
.product-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.product-container {
  display: flex;
  gap: 2rem;
}

.product-image {
  flex: 1;
}

.product-image img {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
}

.product-info {
  flex: 1;
  padding: 1rem;
}

.price {
  color: #e63946;
  font-weight: bold;
  font-size: 1.5rem;
  margin: 1rem 0;
}

.stock {
  color: #666;
  margin-bottom: 1rem;
}

.description {
  margin-bottom: 2rem;
  line-height: 1.6;
}

.quantity-selector {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.quantity-selector button {
  width: 30px;
  height: 30px;
  background: #f0f0f0;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}

.quantity-selector span {
  margin: 0 1rem;
  font-size: 1.2rem;
}

.add-to-cart {
  width: 100%;
  padding: 0.8rem;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}

.add-to-cart:hover {
  background: #3aa876;
}

.loading {
  text-align: center;
  padding: 2rem;
  font-size: 1.2rem;
}
</style>
